<template>
  <div class="home">
  <ul style="list-style-type:none">
    <li>手机 - ¥{{phone.price}} - 数量：{{phone.count}} <input type="button" value="+" @click="add1"><input type="button" value="-" @click="del1"></li>
    <li>电脑 - ¥{{computer.price}} - 数量：{{computer.count}} <input type="button" value="+" @click="add2"><input type="button" value="-" @click="del2"></li>
    <li>键盘 - ¥{{keyboard.price}} - 数量：{{keyboard.count}} <input type="button" value="+" @click="add3"><input type="button" value="-" @click="del3"></li>
    <li></li>
    <li>总价：¥{{ total }}</li>
  </ul>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import { mapState ,mapGetters,mapMutations} from 'vuex';

export default {
  name: 'HomeView',
  computed:{
    ...mapState(['phone','computer','keyboard']),
    ...mapGetters(['total']),
  },
  methods:{
    ...mapMutations(['count1','count2','count3','count4','count5','count6']),
    add1(){
      this.count1()
    },
    add2(){
      this.count2()
    },
    add3(){
      this.count3()
    },
    del1(){
      this.count4()
    },
    del2(){
      this.count5()
    },
    del3(){
      this.count6()
    },
  },
  components: {
    HelloWorld
  }
}
</script>
